import React, { useState } from 'react'
import { EyeOutlined } from '@ant-design/icons';
import '../../assets/Card/Card.scss'
import { Modal } from 'antd';
import Video from '../Placard/Video';
import Long from '../Placard/Long'
import { VideoList, LongList } from '../../data/Tool';

function Card(props: any) {
    // 从props中获取CardList对象，并赋值给变量obj
    let obj = props.CardList
    // 使用useState钩子定义isModalOpen状态及其更新函数setIsModalOpen，并初始化为false
    let [isModalOpen, setIsModalOpen] = useState(false);
    // 定义一个showModal函数，用于在点击时将isModalOpen状态设置为true，显示模态框
    const showModal = () => {
        setIsModalOpen(true)
    }
    // 定义一个handleOk函数，用于在点击模态框的确认按钮时将isModalOpen状态设置为false，关闭模态框
    const handleOk = () => {
        setIsModalOpen(false);
    };
// 定义一个handleCancel函数，用于在点击模态框的取消按钮或背景时将isModalOpen状态设置为false，关闭模态框
    const handleCancel = () => {
        setIsModalOpen(false);
    };

    return (
        <div className='CardImg'>
            {/* 图片   */}
            <div className='CardImg_img'>
                <img src={obj.url} alt="" />
            </div>
            {/* 滑过显示内容  */}
            <div className='CardImg_Info'>
                {/* 标题  */}
                <p>{obj.title}</p>
                <div className='CardImg_user'>
                    {/* 头像+名字 */}
                    <div className='CardImg_info_user'>
                        <img width={20} src={obj.avatar} alt="" />
                        <span>{obj.name}</span>
                    </div>
                    {/* 浏览量 */}
                    <span><EyeOutlined />{obj.num}</span>
                </div>

            </div>
            <div className='CardImg_type'>海报 </div>
            <div className='CardImg_mask'>
                <div onClick={showModal}>查看套装内模版</div>
            </div>
            {/* 显示模块  */}
            <Modal
                footer={null}
                open={isModalOpen}
                // closable={false}
                onOk={handleOk} onCancel={handleCancel} >
                <div style={{ display: 'flex', justifyContent: 'space-around' }}>
                    <Video VideoList={VideoList[5]} />
                    <Long LongList={LongList[1]} />
                </div>

            </Modal>
        </div>
    )
}

export default Card
